.head-box {
  max-width: 750rpx;
  height: 580rpx;
  overflow-x: hidden;
}

.head {
  width: 750rpx;
  height: 420rpx;
  padding: 750rpx 375rpx 0 375rpx;
  margin: -700rpx -375rpx 0 -375rpx;
  border-radius: 100%;
  background: #ffffff;
  overflow: visible;
  position: relative;
  box-shadow: 0 0 40rpx 5rpx #00000020;

  .info {
    .avatar {
      width: 180rpx;
      height: 180rpx;
      padding: 0;
      margin: 0;
      line-height: 1em;
      border-radius: 90rpx;
      border: 5rpx solid #ffffff;

      .img {
        width: 180rpx;
        height: 180rpx;
      }
    }

    .name {
      margin-top: 12rpx;
      font-size: 28rpx;
      font-weight: 600;
    }
    .sign {
      margin-top: 12rpx;
      font-size: 22rpx;
      opacity: 0.5;
      max-width: 600rpx;
    }
  }

  .bullets {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -72rpx;
    gap: 30rpx;

    .item {
      width: 180rpx;
      height: 180rpx;
      border-radius: 100%;
      background-color: #ffffff;
      box-shadow: 0 0 40rpx 5rpx #00000020;

      .num {
        font-size: 64rpx;
        line-height: 1.1em;
      }
      .label {
        font-size: 18rpx;
        opacity: 0.5;

      }

      &.main {
        width: 200rpx;
        height: 200rpx;
        .num {
          font-size: 84rpx;
        }
      }
    }
  }
}

.setting {
  position: fixed;
  right: 16rpx;
  top: 16rpx;
  font-size: 32rpx;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #181818;
  border-radius: 32rpx;
}

.content {
  padding: 0 30rpx;
  
  .ipt {
    // background-color: white;
    position: relative;
    margin: 24rpx 0;
    padding: 24rpx 24rpx;
    border-radius: 12rpx;
    border: 1px solid #808080;
    overflow: visible;
    transition: 500ms;

    .label {
      position: absolute;
      top: 24rpx;
      left: 12rpx;
      font-size: 26rpx;
      padding: 0 12rpx;
      background-color: #f7f7f7;
      color: #808080;
      transition: 500ms;
    }

    &.top, &.focus {
      .label {
        top: -16rpx;
        left: 12rpx;
        font-size: 22rpx;
        padding: 0 12rpx;
      }
    }

    &.focus {
      border: 1px solid var(--main-color);

      .label {
        color: var(--main-color);
      }
    }
  }
}

.bottom {
  position: fixed;
  bottom: 48rpx;
  left: 30rpx;
  right: 30rpx;
  height: 100rpx;
  transform-origin: 0 100%;
  transition: 300ms;
  gap: 32rpx;

  &.hidden {
    height: 0;
    transform: scaleY(0);
    opacity: 0;
  }

  .btn {
    height: 100rpx;
    background-color: #808080;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    width: 240rpx;
    border-radius: 120rpx;

    &.main {
      flex: 1;
      background-color: var(--main-color);
    }

    &.exit {
      width: 100%;
    }
  }
}